#app { height: 100% }
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  height: 100%;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 240px;
  height: 320px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.swiper-slide:nth-child(1n) {
  background-color: #cb72fa;
}

.swiper-slide:nth-child(2n) {
  background-color: #ffa0f9
}

.swiper-slide:nth-child(3n) {
  background-color: #989dff
}

.swiper-slide:nth-child(4n) {
  background-color: rgb(211, 122, 7);
}

.swiper-slide:nth-child(5n) {
  background-color: rgb(118, 163, 12);
}

.swiper-slide:nth-child(6n) {
  background-color: #f6e6a0;
  .el-radio__label{
    color: #111111;
  }

}

.swiper-slide:nth-child(7n) {
  background-color: #fff234;
  .el-radio__label{
    color: #111111;
  }
}

.swiper-slide:nth-child(8n) {
  background-color: rgb(112, 162, 70);
}

.swiper-slide:nth-child(9n) {
  background-color: #ffa629;
}

.swiper-slide:nth-child(10n) {
  background-color: rgb(54, 94, 77);
}
